WPF Charting Documentation - SciChart WPF Charts SDK v8.x
SciChart WPF 2D Charts > MVVM API > Worked Example - CustomRenderableSeries in MVVM
Worked Example - CustomRenderableSeries in MVVM

Worked Example: CustomRenderableSeries in MVVM

If you have created a CustomRenderableSeries you can also use the MVVM API to create and manipulate the series. To do this you will need to create a ViewModel type which inherits BaseRenderableSeriesViewModel and override RenderSeriesType. Next, you can declare the style and properties just as you did for other built-in series types.

Code – SplineLineRenderableSeriesViewModel

Given the SplineLineRenderableSeries type created in Custom Series, we now create a ViewModel, so we can manipulate via the MVVM API:

CustomRenderableSeries in MVVM
Copy Code 
public class SplineRenderableSeriesViewModel : BaseRenderableSeriesViewModel
{
       // Tell SciChart what type of RenderableSeries you want to instantiate
       public override Type RenderSeriesType
       {
             get { return typeof (SplineLineRenderableSeries); }
       }
}

Code – ViewModel

Next, in your ViewModel, declare the SplineRenderableSeriesViewModel as you would any other built-in RenderableSeriesViewModel.

CustomRenderableSeries in MVVM
Copy Code 
void Foo()
{
       _splineData = new XyDataSeries<double, double>() { SeriesName = "Spline" };
       var data = DataManager.Instance.GetSinewave(1.0, 0.0, 100, 25);
       _splineData.Append(data.XData, data.YData);
       RenderSeries = new List<IRenderableSeriesViewModel>()
       {
             new SplineRenderableSeriesViewModel()
             {
                    DataSeries = _splineData,
                    StyleKey = "splineSeriesStyle"
             }
       };
}

// Where
public IEnumerable<IRenderableSeriesViewModel> RenderSeries { get; private set; }

Code – XAML

Finally, apply the SeriesBinding and any style. It is imperative to base any style on MvvmDefaultRenderableSeries style, or the series will not show. To do this, in your View you will need a resource-dictionary and to pull in the SciChart default styles:

CustomRenderableSeries in MVVM
Copy Code 
<UserControl.Resources>               

   <ResourceDictionary>
  
      <!-- Merged Dictionary is required for BasedOn attribute -->
      <ResourceDictionary.MergedDictionaries>
         <ResourceDictionary Source="/SciChart.Charting;component/Themes/Default.xaml"/>
      </ResourceDictionary.MergedDictionaries>

      <!-- The style for the custom renderable series -->
      <!-- IMPORTANT! BasedOn must equal MvvmDefaultRenderableSeriesStyle to
      <!-- pick up the defaults -->
      <Style TargetType="local:SplineLineRenderableSeries" x:Key="splineSeriesStyle"
               BasedOn="{StaticResource MvvmDefaultRenderableSeriesStyle}">
         <Setter Property="IsSplineEnabled" Value="True"/>
         <Setter Property="UpSampleFactor" Value="10"/>
         <Setter Property="Stroke" Value="DarkGreen"/>
         <Setter Property="StrokeThickness" Value="2"/>
         <Setter Property="PointMarkerTemplate">
            <Setter.Value>
               <ControlTemplate>
                  <s:EllipsePointMarker Fill="White" Stroke="DarkGreen"/>
               </ControlTemplate>
            </Setter.Value>
         </Setter>
      </Style>

   </ResourceDictionary>       

</UserControl.Resources>